<template>
	<view>
		<view @click="show = true" class="list-select-box">
			<view class="areaSelect-box">
				<view class="nop">
					{{ selectItem.label || '请选择' }}
				</view>
				<view class="ml20" v-show="isIcon">
					<u-icon v-show="show" color="#607589" name="arrow-up-fill" size="20"></u-icon>
					<u-icon v-show="!show" color="#607589" name="arrow-down-fill" size="20"></u-icon>
				</view>
			</view>
		</view>
		<u-select
			v-if="showIf"
			v-model="show"
			:default-value="selectIndex"
			:list="listTemplate"
			@confirm="confirm"
			@cancel="cancel"
		></u-select>
	</view>
</template>
<script>
	export default {
		name: '',

		props: {
			value: {
				type: null,
				default: null
			},
			// 是否默认选中
			defaultSelect: {
				type: Boolean,
				default: true
			},
			list: {
				type: Array,
				default: () => []
				//{label: item.areaName,value: item.areaCode,extra: index}
			},
			isIcon: {
				type: Boolean,
				default: true
			}
		},
		model: {
			event: 'change',
			prop: 'value'
		},
		watch: {
			list: {
				immediate: true,
				handler(newVal, oldVal) {
					this.init(newVal)
				}
			},
			value() {
				this.setData(this.value)
			}
		},
		computed: {},
		data() {
			return {
				show: false,
				selectIndex: 0, // 选中下标
				selectItem: {},

				listTemplate: [],
				showIf: false
			}
		},
		methods: {
			async init(val) {
				this.showIf = false
				// 默认加上下标
				this.listTemplate = val.map((e, index) => {
					e.extra = index
					return e
				})
				this.$nextTick(() => {
					this.showIf = true
				})
				console.info(`this.value:`, this.value)
				// 存在默认值
				if (this.value) {
					this.setData(this.value)
					return
				}
				// 默认选中第一个
				if (this.defaultSelect) {
					this.confirm([this.listTemplate[0]])
				}
			},
			confirm(arr) {
				let pre = arr[0]
				// let item = this.listTemplate.find((el) => el.value == pre.value)
				// this.selectIndex = [item.extra]
				// this.selectItem = item
				// this.$emit('confirm', item.value, this.listTemplate[item.extra])
				// this.$emit('change', item.value, this.listTemplate[item.extra])
				let itemIndex = this.listTemplate.findIndex((el) => el.value == pre.value)
				this.selectIndex = [itemIndex]
				this.selectItem = this.listTemplate[itemIndex]
				let value = this.listTemplate[itemIndex].value
				this.$emit('confirm', value, this.selectItem)
				this.$emit('change', value, this.selectItem)
			},
			cancel() {
				this.$emit('cancel')
			},
			setData(areaCode) {
				let item = this.listTemplate.find((item) => item.value == areaCode)
				let itemIndex = this.listTemplate.findIndex((item) => item.value == areaCode)
				if (item) {
					this.selectIndex = [itemIndex] // [item.extra]
					this.selectItem = item
				}
			}
		},
		mounted() {}
	}
</script>
<style lang="less" scoped>
	.list-select-box {
		width: 100%;
	}
	.areaSelect-box {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		position: relative;
		justify-content: center;

		.nop {
			text-indent: -20rpx;
		}
		.ml20 {
			position: absolute;
			right: 0;
		}
		// justify-content: space-around;
	}
</style>
